<template>
  <div class="warpper-box">
    <enterprise-select v-if="userInfo.type == 4" ref="enterprise"
      @enterpriseChange="enterpriseChange"></enterprise-select>
    <a-card style="margin-top: 10px;">
      <a-tabs v-model="tabsId" @change="tabsChange">
        <a-tab-pane key="1" tab="客户员工">
          <a-page-header title="客户员工">
            <template slot="extra">
              <a-button type='primary' icon="plus" @click="blockAdd(true)">新增区块</a-button>
              <a-popconfirm title="确认删除自定义字段?" ok-text="确认" cancel-text="取消" :disabled="this.selectedRowKeys.length == 0" @confirm="removeAllFieldsId()">
                <a-button type="danger" :disabled="this.selectedRowKeys.length == 0">批量删除</a-button>
              </a-popconfirm>
            </template>
            <a-table :columns="staffColumns" :data-source="staffData" :pagination="false"
              :rowKey="(record) => { return record.moduleId ? record.moduleId : record.bid }"
              :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: getCheckboxProps }">
              <span slot="fieldType" slot-scope="text">
                <div v-if="text == 1">单行文本</div>
                <div v-else-if="text == 2">下拉单选</div>
                <div v-else-if="text == 3">下拉多选</div>
                <div v-else-if="text == 4">日期组件</div>
                <div v-else-if="text == 5">数字格式</div>
                <div v-else-if="text == 6">图片</div>
                <div v-else-if="text == 7">文件</div>
                <div v-else-if="text == 8">超链接</div>
              </span>
              <span slot="isUse" slot-scope="text, record" v-if="record.bid">
                <a-checkbox :checked="text == 1"></a-checkbox>
              </span>
              <span slot="isMust" slot-scope="text, record" v-if="record.bid">
                <a-checkbox :checked="text == 1"></a-checkbox>
              </span>
              <!-- 操作栏-->
              <span slot="action" slot-scope="text, record">
                <!-- 模块显示新增 -->
                <a @click="$refs.createInfo.add(record, enterpriseId, true, tabsId)" v-show="record.moduleId">新增</a>
                <a-divider type="vertical" v-show="record.moduleId" />
                <!-- 编辑模块 | 字段 -->
                <a @click="blockAdd(record)" v-show="record.moduleId">编辑</a>
                <a-divider type="vertical" v-show="record.moduleId" />
                <a @click="$refs.createInfo.add(record, enterpriseId, record.bid, tabsId)" v-show="record.bid">编辑</a>
                <a-divider type="vertical" v-show="record.bid" />
                <a-popconfirm title="确认删除模块?" ok-text="确认" cancel-text="取消" @confirm="removeModule(record)"
                  v-show="record.moduleId">
                  <a>删除</a>
                </a-popconfirm>
                <a-popconfirm title="确认删除自定义字段?" ok-text="确认" cancel-text="取消" @confirm="removeFieldsId(record, tabsId)"
                  v-show="record.bid">
                  <a>删除</a>
                </a-popconfirm>
              </span>
            </a-table>
          </a-page-header>
        </a-tab-pane>
        <!-- <a-tab-pane key="2" tab="薪资配置">
          <a-page-header title="薪资配置">
            <template slot="extra">
              <a-button type='primary' icon="plus" @click="salaryFieldAdd(true)">新增字段</a-button>
            </template>
            <a-table :columns="salaryColumns" :data-source="salaryData" :pagination="false">
              <span slot="action" slot-scope="text, record">
                <a @click="salaryFieldAdd(record)" v-show="record.fieldId">编辑</a>
                <a-divider type="vertical" v-show="record.fieldId" />
                <a-popconfirm title="确认删除自定义字段?" ok-text="确认" cancel-text="取消" @confirm="removeFieldsId(record, tabsId)"
                  v-show="record.fieldId">
                  <a>删除</a>
                </a-popconfirm>
              </span>
            </a-table>
          </a-page-header>
        </a-tab-pane> -->
      </a-tabs>
    </a-card>

    <add-info ref="createInfo" @on-ok="addLoad" />
    <!-- 客户员工模块 -->
    <a-modal class="add_modal" v-model="blockVisible" :title="blockTitle" :confirmLoading="submitLoadingBlock"
      width="600px" ok-text="确认" cancel-text="取消" @ok="blockAddFormSubmit">
      <a-space style="padding-left: 140px;">
        区块名称：
        <a-input placeholder="请输入区块名称" v-model="blockName" />
      </a-space>
    </a-modal>
    <!-- 薪资字段 -->
    <a-modal class="add_modal" v-model="salaryVisible" :title="salaryFieldTitle" :confirmLoading="submitLoadingSalary"
      width="600px" ok-text="确认" cancel-text="取消" @ok="salaryFieldAddFormSubmit">
      <a-space style="padding-left: 140px;">
        字段名称：
        <a-input placeholder="请输入字段名称" v-model="salaryName" />
      </a-space>
    </a-modal>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import EnterpriseSelect from "@/components/human/enterpriseSelect.vue"
import {
  getStaffList,
  saveModuleDefine,
  updateModule,
  deleteModuleByModuleId,
  deleteFieldByFieldId,
  getSalaryList,
  savaFieldInfo,
  updateFieldInfo,
  deleteFieldInfo,
  batchDeleteFieldByFieldId
} from "@/api/human/config"
import {
  COLUMNS_CONFIGSTAFF,
  COLUMNS_CONFIGSALARY
} from "./form"
import AddInfo from "./config_add"
export default {
  name: 'configList',
  components: {
    AddInfo,
    EnterpriseSelect
  },
  data() {
    return {
      tabsId: '1', // 1-> 员工  2-> 发薪
      enterpriseId: "",
      enterpriseData: [], // 客户列表

      staffColumns: COLUMNS_CONFIGSTAFF,
      staffData: [], // 客户员工数据
      salaryColumns: COLUMNS_CONFIGSALARY,
      salaryData: [], // 薪资字段数据

      blockVisible: false, // 区块开关
      blockTitle: "", // 区块标题
      submitLoadingBlock: false, // 区块加载loading
      blockId: "",
      blockName: "",

      salaryVisible: false, // 薪资字段开关
      salaryFieldTitle: "", // 薪资标题
      submitLoadingSalary: false, // 区块加载loading
      salaryId: "",
      salaryName: "",

      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    if (this.userInfo.type == 4) {
      this.$refs.enterprise.getEnterpriseData();
    } else {
      this.enterpriseId = this.userInfo.relationId
      this.getStaffData();
    }
  },
  destroyed() {

  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })

  },
  created() {

  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // 判断嵌套表格的层级状态
    getCheckboxProps(record) {
      return {
        props: {
          disabled: record.moduleId ? true : false
        }
      }
    },
    // 获取客户员工数据
    getStaffData() {
      this.selectedRowKeys = [];
      getStaffList({
        enterpriseId: this.enterpriseId
      }).then(res => {
        // 处理空数组
        res.data.modules.map((item, i) => {
          if (item.children.length == 0) {
            delete item.children
          }
          return item
        })
        this.staffData = res.data.modules
      })
    },
    // 获取薪资数据
    getSalaryData() {
      getSalaryList({
        enterpriseId: this.enterpriseId
      }).then(res => {
        this.salaryData = res.data
      })
    },

    // 企业选择回调
    enterpriseChange(value) {
      this.enterpriseId = value;
      this.tabsChange(this.tabsId);
    },
    // 员工|发薪切换
    tabsChange(i) {
      this.tabsId = i;
      if (i == '1') {
        this.getStaffData();
      } else {
        this.getSalaryData();
      }
    },
    // 员工新增模块
    blockAdd(rows) {
      this.blockTitle = rows === true ? '新增区块' : '编辑区块';
      this.blockId = rows === true ? '' : rows.moduleId;
      this.blockVisible = true;
      if (rows == true) {
        this.blockName = ""
        this.blockId = ""
      } else {
        this.blockName = rows.name
        this.blockId = rows.moduleId
      }
    },
    // 员工新增模块提交
    async blockAddFormSubmit() {
      if (!this.blockName) {
        this.$message.error('请输入区块名称');
        return;
      }
      this.submitLoadingBlock = true;
      let params = {
        moduleName: this.blockName,
        moduleId: this.blockId,
        enterpriseId: this.enterpriseId
      };
      const {
        code
      } = this.blockId ? await updateModule(params) : await saveModuleDefine(params);
      this.submitLoadingBlock = false;
      if (code === '1') {
        this.$message.success('操作成功');
        this.blockVisible = false;
        this.addLoad();
      }
    },
    // 薪资字段
    salaryFieldAdd(rows) {
      this.salaryFieldTitle = rows === true ? '新增字段' : '编辑字段';
      this.salaryId = rows === true ? '' : rows.fieldId;
      this.salaryVisible = true;
      if (rows == true) {
        this.salaryName = ""
        this.salaryId = ""
      } else {
        this.salaryName = rows.fieldName
        this.salaryId = rows.fieldId
      }
    },
    // 薪资字段提交
    async salaryFieldAddFormSubmit() {
      if (!this.salaryName) {
        this.$message.error('请输入字段名称');
        return;
      }
      this.submitLoadingSalary = true;
      let params = {
        fieldName: this.salaryName,
        fieldId: this.salaryId,
        enterpriseId: this.enterpriseId
      };
      const {
        code
      } = this.salaryId ? await updateFieldInfo(params) : await savaFieldInfo(params);
      this.submitLoadingSalary = false;
      if (code === '1') {
        this.$message.success('操作成功');
        this.salaryVisible = false;
        this.tabsChange('2');
      }
    },
    addLoad() {
      this.getStaffData();
    },
    // 删除模块
    async removeModule(item) {
      let params = {
        moduleId: item.moduleId
      }
      const {
        code
      } = await deleteModuleByModuleId(params);
      if (code === '1') {
        this.$message.success('操作成功');
        this.getStaffData();
      }
    },
    // 删除自定义字段
    async removeFieldsId(item, tab) {
      if (tab == '1') {
        // 员工字段删除
        let params = {
          fieldId: item.bid
        }
        const {
          code
        } = await deleteFieldByFieldId(params);
        if (code === '1') {
          this.$message.success('操作成功');
          this.getStaffData();
        }
      } else {
        // 薪资删除
        let params = {
          fieldId: item.fieldId
        }
        const {
          code
        } = await deleteFieldInfo(params);
        if (code === '1') {
          this.$message.success('操作成功');
          this.getSalaryData();
        }
      }

    },
    // 批量删除自定义字段
    async removeAllFieldsId() {
      let params = {
        fieldIds: this.selectedRowKeys
      }
      const { code } = await batchDeleteFieldByFieldId(params)
      if (code == 1) {
        this.$message.success('操作成功');
        this.getStaffData();
      }
    },
  }
}
</script>
